<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 14587
  Date: 2020/11/13
  Time: 16:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false"%>
<html>
<head>
    <title>分类管理</title>
    <%@include file="../common/head.jsp"%>
    <script type="text/javascript">
        $(function () {
            //先隐藏表格
            $("#createCataForm").hide();

            //点了创建分类的时候展示
            $("#creatCata").click(function () {
                $("#createCataForm").show();
            });
            //提交完再隐藏
            $("#inputName").click(function () {
                $("#createCataForm").hide();
            });
        });
        //展示分类下的博客名称
        function show(id) {
            //发送ajax请求，使得动态的获取到信息
            //这遇到了一个问题，就是每次表格头也会创建，每次都会多创建两个，同理没法用hide
            //这里必须保证不会多于5个
            if( $("#resultBlogTh").find("th").length<5){
                $("<th>博客名称：</th><th>操作：</th>").appendTo($("#resultBlogTh"));
            }
            //这里保证重复点击展开时不会重复出现列表
            if ($("#resultBlogs"+id)!=null) {
                $("#resultBlogs"+id).remove();
            }
            $.post({
                url:"${pageContext.request.contextPath}/cata/admin/showCata",
                data:{"catalogueId":$("#"+id).parent().parent().find("td:first").text()},
                success:function (data) {
                    var resultList = "<td colspan='2'  id='resultBlogs" + id + "'><table class='table table-hover success'><!--<thead><tr><th>博客名称：</th><th>操作：</th></tr></thead><tbody>-->";
                        for (let i = 0; i < data.length; i++) {
                            /*resultList+="<tr class='success'><td>"+data[i]+"</td>";*/
                            resultList+="<tr class='success'><td><a href='${pageContext.request.contextPath}/blog/toBlog?title="+data[i]+"'>"+data[i]+"</a></td>";
                            resultList+="<td><a href='${pageContext.request.contextPath}/cata/deleteBlogInCata/"+data[i]+"'>取消加入分类</a></td></tr>";
                        }
                    resultList+="<tr class='success'><td></td><td><a id='un"+id+"' class='text-right success'href='javascript:void(0)'>收起</a></td></tr><!--</tbody>--></table></td>"
                    $(resultList).appendTo($("#"+id+"Tr"));
                    $("#resultBlogs"+id).show();
                    $("#un"+id).show();
                    $("#un"+id).click(function () {
                        $("#resultBlogs"+id).remove();
                        $("#un"+id).remove();
                        //把最后两个元素删除
                        //因为我们还需要点击收起就取消的一个实践的触发。
                        $("#resultBlogTh").find("th:last").remove();
                        $("#resultBlogTh").find("th:last").remove();
                    });
                }
            })
        }
    </script>
</head>
<body class="pic-bg">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-md-12">
            <div class="page-header">
                <h1 class="text-center" style="color: white">
                    分类管理
                </h1>
            </div>
        </div>
        <div class="col-md-8"></div>
        <div class="col-md-4">
            <div>
                <h1>
                    <small>
                        <a href="${pageContext.request.contextPath}/page/showPage" style="color:white">返回首页</a>
                        &nbsp;|&nbsp;
                        <a href="${pageContext.request.contextPath}/blog/toBlogAdmin" style="color:white">博客管理</a>
                    </small>
                </h1>
            </div>
        </div>
        <div class="col-md-2"></div>
        <div class="col-md-8" style="height:750px;overflow:auto">
            <table class="table table-hover">
                <thead style="color: white">
                <tr id="resultBlogTh">
                    <th >分类id：</th>
                    <th >分类名：</th>
                    <th >操作：</th>
                </tr>
                </thead>


                <tbody>
                    <c:if test="${catalogues!=null}">
                        <c:forEach var="catalogue" items="${catalogues}" varStatus="catalogueStatus">
                                <tr class="success" id="show${catalogueStatus.index+1}Tr">
                                    <td>${catalogue.catalogueId}</td>
                                    <td>${catalogue.catalogueName}</td>
                                    <td>
                                        <a id="show${catalogueStatus.index+1}" href="javascript:void (0)" onclick="show(this.id)">展示分类下博客</a>
                                        &nbsp;|&nbsp;
                                        <a href="${pageContext.request.contextPath}/cata/deleteCata/${catalogue.catalogueId}">删除</a>
                                        <%--如果有blogId的话，说明是从博客管理页面过来的，并且想要添加分类的操作--%>
                                       <c:if test="${blogId!=null}">
                                           &nbsp;|&nbsp;
                                           <a href="${pageContext.request.contextPath}/cata/addCata/${blogId}/${catalogue.catalogueId}">添加到此分类</a>
                                       </c:if>
                                    </td>
                                </tr>
                                    <%--这里发现tr里面如果再嵌套就会出现格式不对的问题--%>
                                    <%--<table id="resultBlogs">
                                        <thead>
                                            <tr>
                                                <th>博客内容</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                    </table>--%>

                            <%--这里是我的第二个思路，但是这里的request域中的blogTitles获取不了，不明白为什么--%>
                            <%--<c:if test="${blogTitles!=null}">
                                <tr  class="success">
                                    <th></th>
                                    <th>博客名称：</th>
                                    <th>操作：</th>
                                </tr>
                                <c:forEach items="${blogTitles}" var="blogTitle">
                                    <tr>
                                        <td>${blogTitle}</td>
                                        <td><a href="${pageContext.request.contextPath}/cata/deleteBlogInCata/${blogTitle}">取消加入分类</a></td>
                                    </tr>
                                </c:forEach>
                            </c:if>--%>
                        </c:forEach>
                    </c:if>
                </tbody>

            </table>
            <div class="col-md-10"></div>
            <div class="col-md-2">
                <h4><a id="creatCata" href="javascript:void (0)" class="textDivBg text-right">创建新的分类</a></h4>
            </div>
            <form action="${pageContext.request.contextPath}/cata/createCata" method="post" id="createCataForm">
                <div class="col-md-2"></div>
                <div class="col-md-4">
                    <h5 style="color: white">分类名</h5>
                </div>
                <div class="col-md-4">
                    <input name="catalogueName" type="text" style="width: 200px">
                </div>
                <div class="col-md-2">
                    <input id="inputName" type="submit" class="btn-success" value="提交">
                </div>
            </form>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>
</body>
</html>
